import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';



const BarChart = ({title}) => {
    // 使用 ref 获取 dom节点
    const chartRef = useRef(null)

    // useEffect 页面渲染完成才执行，保证dom节点已有，才进行图表渲染
    useEffect(() => {
        // const chartDom = document.getElementById('main');  id="main"
        const chartDom = chartRef.current
        // 初始化
        const myChart = echarts.init(chartDom);
        const option = {
            title:{
                text: title
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar'
                }
            ]
        }
        // 渲染图表
        option && myChart.setOption(option);
    }, [title])
    return <div ref={chartRef} style={{ width: '500px', height: '400px' }}></div>
}

export default BarChart